<script lang="ts" setup>
import ShareIcon from "@/components/icon/ShareIcon.vue";
import laudIcon from "@/components/icon/LaudIcon.vue";
import CollectIcon from "@/components/icon/CollectIcon.vue";
import { useRouter, useRoute } from 'vue-router'
import { homeStoriesStore } from "@/store/index";
import { onMounted, ref, watch } from "vue";
import { Api } from '@/apis';
import { HomeDeatilType } from "@/typing";


const store = homeStoriesStore();
const { updateIsDiscoverShow } = store;

const router = useRouter();
const route = useRoute();

const dateVal = ref('');
dateVal.value = String(route.query.date);

const hpData = ref<HomeDeatilType>();
const show = ref(false);

let images = ref<Array<string>>();

watch(() => route.query, (newValue) => {
    dateVal.value = String(newValue.date);
})

onMounted(async () => {
    const { data } = await Api.getHpDetail(dateVal.value);
    hpData.value = data.data;

    images.value = [
        hpData.value.img_url
    ];
})

function showImg() {
    show.value = true
}

function goBackFunc() {
    updateIsDiscoverShow(false)
    router.push({ name: 'discover' });
}

function goToMakeSubtotal(imgUrl: string, forward: string, wordsInfo: string) {
    router.push({
        name: 'make-subtotal',
        query: {
            imgUrl,
            forward,
            wordsInfo
        }
    })
}

function getTimeTitle(date: string) {
    return date.replaceAll('-', '/');
}

</script>
<template>
    <div class="bg-white h-screen">
        <div class="p-5 flex items-center border-b">
            <img class="w-6 h-10" src="@/assets/card/h5_qr_back.png" alt="back" @click="goBackFunc">
            <div class="text-center text-3xl w-11/12 ">{{ getTimeTitle(dateVal) }}</div>
            <ShareIcon :type="1" v-if="hpData" class="ml-14" :shareList="hpData?.share_list" />
        </div>

        <div class="px-8 pt-5 pb-8">
            <div class="rounded-2xl shadow-md">
                <img class="rounded-t-2xl" rounded-t-sm :src="hpData?.img_url" alt="img" @click="showImg">

                <van-image-preview v-model:show="show" :images="images" />

                <div class="pt-4 p-10">
                    <div class="text-center text-gray-400">{{ hpData?.title }} | {{ hpData?.pic_info }}</div>
                    <div class="py-10 min-h-[15rem] text-2xl">{{ hpData?.forward }}</div>
                    <div class="text-center text-gray-400">{{ hpData?.words_info }}</div>
                </div>
            </div>
            <div class="flex justify-between items-center pt-8 px-3">
                <div class="flex justify-around items-center">
                    <img class="rounded-full w-12 " src="../../assets/card/discovery.png" alt="img">
                    <div class="text-gray-400 ml-3">小记</div>
                </div>
                <div class="flex justify-between items-center w-3/5">
                    <img class="w-10 h-10" src="../../assets/card/diary_icon.png" alt="share"
                        @click="goToMakeSubtotal(hpData?.img_url || '', hpData?.forward || '', hpData?.words_info || '')">

                    <CollectIcon v-if="hpData" :listItem="hpData" />
                    <laudIcon :countNum="Number(hpData?.like_count)" />
                    <ShareIcon :type="0" v-if="hpData" :shareList="hpData.share_list" />
                </div>
            </div>
        </div>
    </div>
</template>
